<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title> </title>
<style type='text/css'>

html {
  height:100%;
  }

body {
  background-color:#666;
  margin:0;
  padding:0;
  

  }

h1 {


  margin:0;
  padding:0;
  text-align:center;
  }

ul {
  margin:0;
  padding:0;
  width:30px;
  list-style:none;
  position:absolute;
  top:300px;
  margin-left:50%;
  }

li {
  position:absolute;
  width:80px;
  height:80px;
  margin-top:-40px;
  margin-left:-40px;
  line-height:72px;
  font-size:60px;
  color:#fff;
  text-align:center;
  xxborder:1px solid #fff;
  }

ul+p {
  line-height:30px;
  position:absolute;
  width:610px;
  bottom:10%;
  left:50%;
  color:#999;
  font-size:16px;
  text-align:center;
  margin-top:-15px;
  margin-left:-250px;
  xxborder:1px solid blue;
  }

span {
  display:block;
  width:300px;
  height:20px;
  xxborder: 1px solid red;
  float:left;
  cursor:pointer;
  background-color:#fff;
  }



</style>

<script  type='text/javascript' src='../../animation.js' ></script>

<script type='text/javascript'>

var deltaAngle=0;
var animations=[];

var angleToRGB=function ( a ) 
{
	var rest = a % 60;
	a -= rest;	
	rest = Math.floor( 255/60*rest );
	if ( a == 360 ) a=0;
	if( a >= 0  && a < 60 ) return 'rgb('+ 255 +','+ rest +','+ 0 +')';
	if( a >= 60 && a < 120 ) return 'rgb('+ (255-rest) +','+ 255 +','+ 0 +')';
	if( a >= 120 && a < 180 ) return 'rgb('+ 0 +','+ 255 +','+ rest +')';
	if( a >= 180 && a < 240 ) return 'rgb('+ 0 +','+ (255-rest) +','+ 255 +')';
	if( a >= 240 && a < 300 ) return 'rgb('+ rest +','+ 0 +','+ 255 +')';
	if( a >= 300 && a < 360 ) return 'rgb('+ 255 +','+ 0 +','+ (255-rest) +')';
}

var startTurn=function(dir)
{
  var pointer=null, i=0;
  for ( ; pointer=animations[i]; i++)
  {
    pointer.turn();
  }
}





var turn=function(dir)
{
  if(dir)
  {
    if(!turn.run)
    {
      turn.run=true;
      turn.dir=dir;
      startTurn(dir);
    }
  }
}



turn.maxSpeed=50;

turn.start=0;
turn.target=0;
turn.opacity=0;

var getSpeed=function()
{
   return turn.opacity*turn.target;
}


var strategyTurnOnCircle=function(prop, current, animation, radius, startAngle)
{
  var sin=Math.sin;
  var cos=Math.cos;
  var pi=Math.PI;
  var round=Math.round;
  var newAngle=0;
  var style=animation.style;
  animation.speed=getSpeed();
  if(radius)
  {
    style.radius=radius;
    style.Angle=newAngle=startAngle;
  }
  else
  {
    newAngle=prop.from+prop.delta*current/100;
  }
  if(newAngle>360) newAngle-=360;
  if(newAngle<0) newAngle+=360;
  style.left=round(style.radius*cos(newAngle/360*2*pi))+'px';
  style.top=round(-style.radius*sin(newAngle/360*2*pi))+'px';
  style.color=angleToRGB(newAngle);
  return newAngle;
}

var animationHandler=function(event, to)
{
  var ele=event.target, animation=ele._animation_fade;
  if(ele.nodeName.toLowerCase()=='span')
  {
    if(!animation)
    {
      animation=ele._animation_fade=ele.createAnimation();
      animation.speed=10;
      animation.style.opacity=0;
      animation.accelerationProfile=animation.accelerate;
      animation.fade=function(to)
      {
        if(this._isrunning) this.stop();
        this.addAnimation('opacity', this.style.opacity, to).run();
      }
    }
    animation.fade(to);
  }
}

var adjustSpeed=function(event)
{
  if(event.target.nodeName.toLowerCase()=='span')
  {
    turn.opacity=event.target.style.opacity;
  }
}

onload=function()
{
  var lis=document.getElementsByTagName('li'), li=null, start=0, anim=null, i=0;
  deltaAngle=360/lis.length;
  for( ; li=lis[i]; i++)
  {
    anim=animations[animations.length]=li.createAnimation();
    anim.speed=5;
    anim.id='anim_'+i;
    strategyTurnOnCircle(null, null, anim, 200, start);
    start+=deltaAngle;
    anim.turn=function()
    {
      this.addAnimation
      (
        'Angle', 
        this.style.Angle.toString(), 
        (this.style.Angle-(turn.dir*deltaAngle)).toString(), 
        strategyTurnOnCircle
      ).run();
    }
    anim.onfinish=function()
    {
      if(turn.opacity) this.turn();
    }
  }

  document.body.className=document.body.className;

  document.getElementsByTagName('p')[0].addEventListener('mouseover', function(event){animationHandler(event, 1)}, false);
document.getElementsByTagName('p')[0].addEventListener('mouseout', function(event){animationHandler(event, 0)}, false);

  var span=document.getElementsByTagName('span')[1];
  span.onmouseover=function(){turn(1)};
  span.onmouseout=function(){turn(0)};
  span.width=span.offsetWidth;
  span.onmousemove=function(event)
  {
    
    if(event.offsetX<this.width)turn.target=event.offsetX/this.width*turn.maxSpeed;
  }

  document.addEventListener('OAnimationFrame', adjustSpeed, false);

  
}

</script>
</head>

<body>
<h1>Custom Strategy</h1>
<ul>


  <li>W
  <li>
  <li>a
  <li>r
  <li>e
  <li>p
  <li>O
<li>
  <li>y
  <li>r
  <li>o
  <li>t
  <li>c
  <li>a
  <li>F
  <li>
  <li>t
  <li>e
  <li>g
  <li>d
  <li>i
</ul>

<p>
  <span></span>
  <span></span>
</p>
<p><input>
 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>
